<template>
  <div class="injureReport">
    <div class="injureReport-header noprint">
      <el-card class="drug-head-contatiner-title2" shadow="never">
        <h2>门诊部患者信息</h2>
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="formSearch.startTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="formSearch.endTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="来源">
            <el-select v-model="formSearch.source" placeholder="--请选择--">
              <el-option
                v-for="item in sourceOptions"
                :key="item.Code"
                :label="item.Name"
                :value="item.Code"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button
              v-model="formSearch.ifDevide"
              type="primary"
              @click="formSearch.ifDevide = !formSearch.ifDevide"
              >{{ formSearch.ifDevide ? '分页预览' : '整体预览' }}</el-button
            >
            <el-button type="primary" @click="onlyPrint">打印</el-button>
            <el-dropdown @command="handleCommand" style="margin: 10px">
              <el-button type="primary">
                导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="a">Excel</el-dropdown-item>
                  <el-dropdown-item command="b">pdf</el-dropdown-item>
                  <el-dropdown-item command="c">Word</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- <el-button
              type="primary"
              @click="
                exportExcel.methods.exportExcel('#tab1', '门诊部患者信息.xlsx')
              "
              >导出</el-button
            > -->
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="injureReport-list" v-loading="loading">
      <iframe
        src=""
        frameborder="0"
        id="print-iframe"
        width="100%"
        height="700px"
        title="预览窗格"
      ></iframe>
    </div>
    <el-row class="noprint">
      <el-col :span="12" :offset="11">
        <el-pagination
          background
          layout="total"
          v-model:total="formSearch.total"
          v-model:page-size="formSearch.pageSize"
          v-model:current-page="formSearch.page"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { Base64 } from 'js-base64';
import { getSourceOptionsDic, exportFileShiyiData } from '@/network/report';
let sourceOptions = ref(null);
const loading = ref(true);
//时间格式化
const rTime = (time) => {
  var date = new Date(time);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? '0' + m : m;
  var d = date.getDate();
  d = d < 10 ? '0' + d : d;
  var h = date.getHours();
  h = h < 10 ? '0' + h : h;
  var minute = date.getMinutes();
  minute = minute < 10 ? '0' + minute : minute;
  var s = date.getSeconds();
  s = s < 10 ? '0' + s : s;
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s;
};
// 搜索条件
const formSearch = reactive({
  source: '',
  startTime: `${new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)}`,
  endTime: `${new Date()}`,
  total: 0,
  page: 1,
  pageSize: 10,
  ifDevide: false,
});
const handleCommand = (command) => {
  console.info(command, 'command');
  switch (command) {
    case 'a':
      exportFile('门诊部患者信息.xlsx');
      break;
    case 'b':
      exportFile('门诊部患者信息.pdf');
      break;
    case 'c':
      exportFile('门诊部患者信息.docx');
      break;
    default:
      break;
  }
};
const exportFile = async (filename) => {
  let paramsPrint = {
    source: formSearch.source,
    startTime: rTime(formSearch.startTime),
    endTime: rTime(formSearch.endTime),
    filename,
    ifDevide: false,
  };
  await exportFileShiyiData(paramsPrint, 'blob').then((ret) => {
    let bytearray = Base64.toUint8Array(ret.data.FileContents);
    let blob = new Blob([bytearray]);
    const link = document.createElement('a'); //利用a标签自定义下载文件名
    link.style.display = 'none';
    //设置连接
    link.href = URL.createObjectURL(blob);
    link.download = filename; //自定义文件名字
    document.body.appendChild(link);
    // 模拟点击事件;
    link.click();
    link.parentNode.removeChild(link);
    URL.revokeObjectURL(link.href);
  });
};
const handleCurrentChange = async (val) => {
  formSearch.page = val;
  initData();
};
//表单提交
const onSubmit = async () => {
  loading.value = true;
  formSearch.page = 1;
  initData();
};
//初始化
const initData = async () => {
  let params = {
    source: formSearch.source,
    startTime: rTime(formSearch.startTime),
    endTime: rTime(formSearch.endTime),
    page: formSearch.page,
    pageSize: formSearch.pageSize,
    filename: '市一院.html',
    ifDevide: formSearch.ifDevide,
  };

  await exportFileShiyiData(params).then((res) => {
    loading.value = false;
    let bytearray = Base64.decode(res.data.FileContents);
    formSearch.total = parseInt(res.total);
    //判断iframe是否存在，不存在则创建iframe
    var iframe = document.getElementById('print-iframe');
    var doc = null;
    doc = iframe.contentWindow.document;
    doc.write('<div>' + bytearray + '</div>');
    doc.close();
    iframe.contentWindow.focus();
    // let nodedom = document.querySelector('.injureReport-list');
    // nodedom.innerHTML = '';
    // nodedom.innerHTML = res;
  });
};
const init = async () => {
  await getSourceOptionsDic().then((res) => {
    sourceOptions.value = res;
  });
};
onMounted(() => {
  initData();
  init();
});
const onReset = () => {
  formSearch.source = '';
  initData();
};
const onlyPrint = async () => {
  var iframe = document.getElementById('print-iframe');
  iframe.contentWindow.print();
};
</script>
<style lang="scss" scoped>
@media print {
  .noprint {
    display: none;
    color: red;
  }
}
.injureReport {
  margin: 14px 15px 14px;

  .injureReport-header {
    .drug-head-contatiner-title2 {
      h2 {
        text-align: center;
        margin-bottom: 14px;
      }

      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }

  .injureReport-list {
    margin-top: 14px;
    // width: 500px;
  }
}
</style>
